<template>
  <div class="s">
    <div class="c-l">
      <div class="c-i">
        <p>海阔天空</p>
        <div>歌手: beyond</div>
      </div>
      <div class="c-lyr" ref="scroll">
        <ul ref="ul">
          <!-- :class='{hight:high(item.time,lyrs[index+1].time,time)}' -->
          <!-- :class='{hight:time>item.time&&time<lyrs[index+1].time}' -->
          <!-- high(index,lyrs,time) -->
          <li
            v-for="(item, index) in lyrs"
            :key="index"
            :class="{ hight: index == highlightLine }"
          >
            {{ item.lyr }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "song",
  props: ["isplay", "time"],
  data() {
    return {
      imgUrl: "",
      lyric: "",
      lyrs: [],
      lis: [],
      tops: [],
      highlightLine: 0,
    };
  },
  methods: {
    scale() {
      this.$emit("mini");
    },
    //正则处理歌词
    regRex(str) {
      // var reg= /(ru)n(oob)/i
      //获取歌词贡献者
      let regUser = /\[(.*)\]\n/gim;

      let user = regUser.exec(str);
      str = str.substring(user[0].length, str.length);

      //匹配歌词
      let reg = /\[(.*)\](.*)\n/gim;
      let res;
      while ((res = reg.exec(str))) {
        this.lyrs.push({ time: this._timeForm(res[1]), lyr: res[2] });
      }
      this.$nextTick(() => {
        this._initTops(this.$refs.ul.children);

        console.log(this.$refs.ul.children);
      });
    },
    //将字符串xx:xx的时间格式处理成秒
    _timeForm(time) {
      let index = time.indexOf(":");
      let min = time.substring(0, index);
      let seconds = time.substring(index + 1, time.length);
      return min * 60 + seconds * 1;
    },
    //获取每一个歌词li的高度
    _initTops(arr) {
        console.log(arr,22222);
      let tops = [];
      Array.from(arr).forEach((item, index) => {
        tops.push(item.offsetTop);
      });
      this.tops = tops;
      console.log(this.tops);
    },
    //监听任意方式得到的当前播放时间,来进行对象滚动,当index在歌词前五行和后无行时,进行居中
    //歌词和空白都是固定高度,所以可以通过歌词的行数来确定居中
    //居中方式:当前行到顶部的距离(-90是因为父元素到滑动区域的距离有90)-在多少行就可以居中
    _scrollTo(index) {
    //   console.log(index);
      if (index < 5) {
        this.$refs.scroll.scrollTop = 0;
      } else if (index >= this.lyrs.length - 5) {
          console.log(2222);
        this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
      } else {
          console.log(this.tops,this.tops[index] ,this.tops[index + 1], this.tops[index]);
        this.$refs.scroll.scrollTop = this.tops[index] - 90 - (this.tops[index + 1] - this.tops[index]) * 4;
      }
      console.log(this.$refs.scroll.scrollTop,index);
    },
  },
  computed() {
    song();
    {
      //   if
    }
  },
  async mounted() {
    // let imgRes=await axios.get('https://api.imjad.cn/cloudmusic/?type=detail&id=346089');
    // let lyricRes=await axios.get('https://api.imjad.cn/cloudmusic/?type=lyric&id=346089');
    let imgRes = null;
    // this.imgUrl=imgRes.data.songs[0].al.picUrl;
    this.lyric = "[00:00.000] 作词 : 雷壮、爱写歌的小田\n[00:00.000] 作曲 : 爱写歌的小田\n[00:00.01]本歌曲来自〖网易飓风计划〗\n[00:00.02]10亿现金激励，千亿流量扶持！\n[00:00.03]业务联系：jf399@vip.163.com\n[00:00.841]编曲：罗洋（卡其漠）\n[00:01.533]\n[00:02.264]我多想回到那个夏天\n[00:05.885]蝉鸣在田边吹过眼睫\n[00:09.503]贪恋夏夜星空你侧脸\n[00:13.196]犹记得清风撩拨心弦\n[00:16.822]初夏的味道是你微笑\n[00:20.454]我捧着月亮别来无恙\n[00:24.727]去更远的地方 见更亮的光\n[00:30.811]\n[00:32.935]穿白色衬衣的少年\n[00:35.992]他在我隔壁班\n[00:40.228]在操场上挥洒着汗\n[00:43.168]篮球被他玩转\n[00:46.775]快沸腾的想念\n[00:50.184]心动不止一点点\n[00:53.904]那年的池塘边 蝶舞翩翩\n[00:59.892]\n[01:02.012]听你最爱弹的和弦\n[01:04.968]是懵懂的爱恋\n[01:09.310]好想好想单曲循环\n[01:12.328]伴着我说晚安\n[01:15.840]青春往事如烟\n[01:19.072]你却在回忆里扑闪\n[01:22.928]我想永远永远 不再说再见\n[01:29.014]\n[01:29.511]我多想回到那个夏天\n[01:33.173]蝉鸣在田边吹过眼睫\n[01:36.775]贪恋夏夜星空你侧脸\n[01:40.470]犹记得清风撩拨心弦\n[01:44.105]初夏的味道是你微笑\n[01:47.685]我捧着月亮别来无恙\n[01:52.018]去更远的地方 见更亮的光\n[01:58.061]\n[02:14.599]穿白色衬衣的少年\n[02:17.699]他在我隔壁班\n[02:21.938]在操场上挥洒着汗\n[02:25.019]篮球被他玩转\n[02:28.597]快沸腾的想念\n[02:32.021]心动不止一点点\n[02:35.653]那年的池塘边 蝶舞翩翩\n[02:41.681]\n[02:42.158]我多想回到那个夏天\n[02:45.860]蝉鸣在田边吹过眼睫\n[02:49.532]贪恋夏夜星空你侧脸\n[02:53.208]犹记得清风撩拨心弦\n[02:56.830]初夏的味道是你微笑\n[03:00.396]我捧着月亮别来无恙\n[03:04.709]去更远的地方 见更亮的光\n[03:10.786]\n[03:11.190]我多想回到那个夏天\n[03:14.944]蝉鸣在田边吹过眼睫\n[03:18.565]贪恋夏夜星空你侧脸\n[03:22.258]犹记得清风撩拨心弦\n[03:25.866]初夏的味道是你微笑\n[03:29.494]我捧着月亮别来无恙\n[03:33.749]去更远的地方 见更亮的光\n[03:39.890]\n[03:41.792]制作人：爱写歌的小田\n[03:43.499]和声：小手\n[03:45.370]混音：张鸣利\n[03:47.133]监制：刘家泽\n[03:48.987]制作公司：匠心音乐\n[03:50.773]企划统筹：李永江 / 苏文嫒\n[03:52.787]宣发统筹：袁晓童 / 黄嘉慧 / 王暴雨\n[03:54.787]飓风计划合作邮箱：jf399@vip.163.com\n[99:00.01]本歌曲来自〖网易飓风计划〗\n[99:00.02]10亿现金激励，千亿流量扶持！\n[99:00.03]业务联系：jf399@vip.163.com\n"

    // this.lyric=lyricRes.data.lrc.lyric;
    this.regRex(this.lyric);
  },
  watch: {
    lyrs() {
        console.log(222222222);
      this.$nextTick(() => {
        this._initTops(this.$refs.ul.children);

        console.log(this.$refs.ul.children);
      });
    },
    //监听当前播放时间,和转换后的歌词时间进行对比,获得当前时间对应的歌词行数
    //第一行时间之前,直接制顶,否则会因为findIndex找不到从而获取到最后一行的索引
    time(time) {
        // console.log(time ,this.lyrs);
      if (time < this.lyrs[0].time) {
        this.$refs.scroll.scrollTop = 0;
        return;
      }
      let index = this.lyrs.findIndex((item, index) => {
        if (index < this.lyrs.length - 1) {
            // console.log(index,item.time <= time && this.lyrs[index + 1].time >= time);
          return item.time <= time && this.lyrs[index + 1].time >= time;
        } else {
          return true;
        }
      });
    //   console.log("第二个",index);
      this._scrollTo(index);
      this.highlightLine = index;
    },
  },
};
</script>

<style scoped lang="scss">
.s {
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
  > .scale {
    position: absolute;
    right: 40px;
    top: 40px;
    width: 30px;
    height: 20px;
    border: solid 1px #ccc;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
  .b-i {
    position: absolute;
    left: 25%;
    > img {
      width: 400px;
      height: 400px;
      filter: blur(20px) opacity(0.5);
    }
  }
  .c-c {
    height: 300px;
    width: 300px;
    border-radius: 300px;
    background: #2b2c2f;
    text-align: center;
    line-height: 300px;
    position: absolute;
    left: 0;
    margin: 80px 80px;
    animation: rot 20s linear infinite;
    > img {
      height: 200px;
      width: 200px;
      border-radius: 200px;
    }
  }
  .on {
    animation-play-state: running;
  }
  .done {
    animation-play-state: paused;
  }

  @keyframes rot {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .c-l {
    height: 450px;
    width: 400px;
    position: absolute;
    overflow: hidden;
    right: 70px;
    top: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .c-i {
      flex: 1;
      > p {
        font-weight: 500;
        font-size: 20px;
        margin-bottom: 10px;
      }
      margin-bottom: 30px;
    }
    .c-lyr {
      flex: 8;
      width: 100%;
      overflow-y: scroll;
      > ul {
        height: 100%;
        list-style: none;

        li {
          height: 35px;
          // padding: 7px 0;
          line-height: 35px;
          color: #555254;
        }
        .hight {
          color: white;
        }
      }
    }
    .c-lyr::-webkit-scrollbar {
      width: 8px;
      background-color: #fafafa;
    }
    .c-lyr::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #e1e1e2;
    }
  }
}
</style>
